<template>
	<div>
		<div class="box">
	<van-nav-bar
  title="会员中心"
  left-text=""  
  left-arrow
  @click-left="onClickLeft" 
/>

<!-- 轮播 -->
<van-swipe :autoplay="3000" indicator-color="white" :width="375">
  <van-swipe-item v-for="(item,i) in listTop" :key="i"><img :src="item.picPath"/></van-swipe-item>  
</van-swipe>

<!-- 积分 -->
<div id="jf">
	<van-row type="flex" justify="space-around">
	  <van-col span="6">
		  <dl>
			  <dd></dd>
			  <dt>我的积分</dt>
		  </dl>
	  </van-col>
	  <van-col span="6">
		  <dl>
			  <dd></dd>
			  <dt>每日签到</dt>
		  </dl>
	  </van-col>
	  <van-col span="6">
		  <dl>
			  <dd></dd>
			  <dt>我的奖励</dt>
		  </dl>
	  </van-col>
   </van-row>
</div>	
</div>
	<!-- 会员 -->
<div class="vip-k">
		<h3>时光会员  专享好货</h3>
		
<van-row type="flex" justify="space-between">
  <van-col span="10" v-for="(item,i) in listBottom" :key="i">
	  <dl :data-id="item.foodListId" @click="tap(item.foodListId)">
		  <dt><img :src='item.foodListImgpath'></dt>
		  <dd>
			  <p class="p01">{{item.foodListContent}}</p>
			  <p class="p02">{{item.foodListContentDetail}}</p>
			  <p class="p02">{{item.suitAge}}</p>
		  </dd>
	  </dl>
  </van-col>
  

</van-row>

</div>
	


</div>
</template>

<script>
	import axios from 'axios'
	export default{
		name:'Member',
		data(){
			return{
				listTop:[],
				listBottom:[]
			}
		},
		methods: {
    onClickLeft() {
      this.$router.go(-1)
	},
	tap(id){
		let that = this
		axios({
			url:"http://10.8.158.60:8080/foodlist/foodlistContentDetail",
			params:{"id":id}
		}).then(function(data){
			this.$router.push('/dnasjksa?'+id)
		})
	}
  },
  mounted(){
	  var _this = this
	  axios({
		  url:'http://10.8.158.60:8080/picture/foodListPicture'
	  }).then(function(data){
		  _this.listTop = data.data.msg
	  }),
	  axios({
				url:'http://10.8.158.60:8080/foodlist/foodlistcontent',
				
	  }).then(function(data){
		  console.log(data)
	  		  _this.listBottom = data.data.msg
	  })
  }
	}
</script>

<style scoped>
	.box{
		position: fixed;
	}
	.van-nav-bar{	
		width: 375px;
		height: 42px;
		background-color: rgba(249, 249, 249, 1);
		color: rgba(100, 100, 100, 1);
		font-size: 14px;
		text-align: center;
		font-family: Arial;
	}
	.van-nav-bar__left .van-icon{
      color: #000000;
      font-weight: bold;
	}
	
	/* 轮播 */
	.van-swipe{
		width: 375px;
		height: 200px;
	
	}
	.van-swipe__indicators{
		margin-bottom: 12px;
	}
	
	/* 积分 */
	#jf{
		width:375px;
		height:85px;
		position: relative;
		z-index: 100;
	}
	#jf .van-row{
		width: 351px;
		height: 100px;
		background: #FFFFFF 100%;
		border-radius:12px ;
		position: absolute;
		bottom:0px;
		left:12px;
	}
	#jf .van-row dl{
		width: 94px;
		height: 85px;
		margin-top: 12px;
	}
	#jf .van-row dd{
		width: 50px;
		height: 50px;
		border-radius: 8px;
		background-color: rgba(230, 230, 230, 1);
		margin:0 auto;	
     overflow: hidden;

	}
	#jf .van-row dt{
		width: 94px;
		height: 30px;
		color: rgba(102, 102, 102, 1);
		font-size: 12px;
		text-align: center;
		font-family: Microsoft Yahei;
		margin-top:5px;
		 overflow: hidden;
	}
	/* 会员 */
	.vip-k{
		width:349px;
		padding: 300px 13px 0;
		overflow: auto
	}
	.vip-k h3{
		width: 194px;
		height: 30px;
		color: rgba(102, 102, 102, 1);
		font-size: 18px;
		text-align: center;
		font-family: Microsoft Yahei;	
		margin: 0 auto;
	}
	.vip-k .van-row{
		flex-wrap: wrap;
		/* margin-top:5px; */
	}
	.vip-k .van-col{
		width:150px;
		height: 214px;
		margin-top:5px
	}
	.vip-k .van-col dl{
		width:150px;
		height: 214px;
		overflow: hidden;
	}
	.vip-k .van-col dt{
		width: 150px;
		height: 150px;
		border-radius: 8px;
		background-color: rgba(230, 230, 230, 1);
		overflow: hidden;
	}
	.vip-k .van-col dt img{
		width: 150px;
		height: 150px;
	}
	.vip-k .van-col dd p{
		overflow: hidden;
		white-space:nowrap;
		text-overflow: ellipsis	
	}
	.vip-k .van-col dd .p01{
		width: 126px;
		height: 30px;
		color: rgba(102, 102, 102, 1);
		font-size: 12px;
		text-align: left;
		font-family: Microsoft Yahei;
		line-height: 30px;
		
	}
	.vip-k .van-col dd .p02{
		width: 126px;
		height: 16px;
		color: rgba(102, 102, 102, 1);
		font-size: 12px;
		text-align: left;
		font-family: Microsoft Yahei;
		border: 1px solid rgba(255, 255, 255, 0);
	}
	.vip-k .van-col dd .p03{
		width: 92px;
		height: 23px;
		color: rgba(210, 210, 210, 1);
		font-size: 10px;
		text-align: left;
		font-family: Arial;
	}
	
</style>
